<template>
	<view>
		<view class="warp">
			<uni-card is-full :is-shadow="false">
				<text class="uni-h6">智慧社区</text>
			</uni-card>

			<uni-section title="服务" type="line" padding>
				<uni-grid :column="4" :show-border="false" :square="false">
					<uni-grid-item v-for="(item,index) in serviceList" :index="index" :key="index"
						@tap="goToPage(item)">
						<view class="grid-item-box">
							<image class="image-board" :src="item.url" mode="aspectFill" />
							<text class="text">{{item.text}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>

		<view class="container">
			<uni-card :is-shadow="false" is-full>
				<view style="display: flex;">
					<image class="image-left" src="/static/home/board.png"></image>
					<text class="uni-h6">卡片组件通用来显示完整独立的一段信息。</text>

				</view>
			</uni-card>
		</view>

		<view class="warp">
			<uni-section padding>
				<uni-grid :column="2" :show-border="false" :square="false">
					<uni-grid-item v-for="(item ,index) in fastList" :index="index" :key="index">
						<view class="grid-item-box">
							<image class="image-fast" :src="item.url" mode="scaleToFill" />
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>

		<view>
			<button @tap="testCommunity">test</button>
		</view>

	</view>
</template>

<script>
	import { requestCommunity } from '@/pages/api/seek.js'
	export default {
		components: {},
		data() {
			return {
				dynamicList: [],
				serviceList: [{
						url: '/static/menu/board.png',
						text: '物业公告',
						page: './notice/notice',
					},
					{
						url: '/static/menu/rule.png',
						text: '社区规约',
						page: './notice/rule',
					},
					{
						url: '/static/menu/wei.png',
						text: '业委会',
						page: './notice/authority',
					},
					{
						url: '/static/menu/vote.png',
						text: '业主投票',
						page: './notice/vote',
					},
					{
						url: '/static/menu/repair.png',
						text: '报事报修',
						page: './notice/repair',
					},
					{
						url: '/static/menu/activity.png',
						text: '社区活动',
						page: '../activity/activity', 
					},
					{
						url: '/static/menu/home.png',
						text: '房屋租售',
						page: './notice/renting',
					},
					{
						url: '/static/menu/my.png',
						text: '个人中心',
					}
				],
				fastList: [{
						url: '/static/home/cute_1.jpg',
						text: '物业服务',
					},
					{
						url: '/static/home/cute_2.jpg',
						text: '便民电话',
					},
					{
						url: '/static/home/cute_3.jpg',
						text: '联系物业',
					},
					{
						url: '/static/home/cute_4.jpg',
						text: '在线客服',
					}
				]

			}
		},
		methods: {
			goToPage(item) {
				uni.navigateTo({
					url: item.page
				})
			},
			testCommunity() {
				requestCommunity().then(data => {
					console.log(data);
					// 处理数据...  
				}).catch(error => {
					console.error('Error fetching data with params:', error);
				});
			},
			add() {
				if (this.dynamicList.length < 9) {
					this.dynamicList.push({
						url: `/static/c${this.dynamicList.length+1}.png`,
						text: `Grid ${this.dynamicList.length+1}`,
						color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
					})
				} else {
					uni.showToast({
						title: '最多添加9个',
						icon: 'none'
					});
				}
			},
			del() {
				this.dynamicList.splice(this.dynamicList.length - 1, 1)
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.image-board {
		width: 70rpx;
		height: 70rpx;
		background-color: #00aaff;
	}

	.image-fast {
		width: 300rpx;
		height: 200rpx;
	}

	.image-left {
		width: 100px;
		/* 图片宽度 */
		height: 60px;
		/* 图片高度 */
		margin-right: 10px;
		/* 图片与文字之间的间距 */
	}

	.text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>